import { StyleSheet, Text, View, Pressable } from 'react-native';
import React from 'react';
import WebView from 'react-native-webview';
import { useTranslation } from 'react-i18next';
import { useNavigation } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';
import { NavBarHeader } from '~/components';
import { px2dp } from '~/utils/px2dp';
import { userStore, observer } from '~/store';

export default observer(() => {
    const { t } = useTranslation();
    const navigation: any = useNavigation();
    const goBack = () => {
        if (userStore.isRole == 'Acupoints') {
            navigation.navigate('AcupointsScreen');
        } else {
            navigation.navigate('Main');
        }
    };
    return (
        <View style={styles.container}>
            <NavBarHeader
                title={t('AiChat.title')}
                leftComponent={
                    <Pressable onPress={goBack}>
                        <Icon name={'close'} size={px2dp(50)} color={'#000'}></Icon>
                    </Pressable>
                }
            />
            <WebView
                style={{ flex: 1 }}
                domStorageEnabled={true}
                javaScriptEnabled={true}
                incognito={true}
                textZoom={100}
                startInLoadingState={true}
                source={{
                    uri: `https://xiaozhi.me/login?redirect=/console/agents`,
                }}
            />
        </View>
    );
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});
